<template>
  <div id="sheep"    
    ref="sheep"   
    @mousemove="moveSheep"
    @mouseup="returnSheep">
    <!--告示提示信息-->
    <div class="msg" @click="showTB">
      <div class="msg_box">
        <h1>今日公告</h1>
        <span>click me</span>
      </div>
    </div>
    <!--告示牌-->
    <transition name="el-zoom-in-center">
        <div v-show="show" class="transition-box">
            <div class="close" @click="closeTB">
              x
            </div>
            <div>
              <img src="@/assets/img/about.jpg"></img>
            </div>
            <div class="introduce">
              <h5>关于本站：</h5>
              <p>还在开发中。。。。
              </p>            
            </div>
          </el-row>
        </div>
    </transition>

    <div class="box" v-for="item in startPosition"
      @mousedown="catchSheep"
      @mouseup="returnSheep"
      :style="item">
      <div class="smallSheep">
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        curSheep:null,
        exLeft:0,
        exTop:0,
        startPosition:[{left:'1300px'},{left:'1100px'},{left:'900px'},{left:'300px'},{left:'50px'}], 
        show:false //控制transition-box显示隐藏
      }
    },
    mounted(){
    },
    beforeDestroy(){
      this.show = false;
    },
    methods:{
      catchSheep(event){
        this.exLeft = event.clientX - event.currentTarget.offsetLeft
        this.exTop = event.clientY - event.currentTarget.offsetTop
        this.curSheep = event.currentTarget         
      },
      moveSheep(event){
        if(this.curSheep !== null){
          this.curSheep.setAttribute('class', 'box_isCatched')
          this.curSheep.firstChild.setAttribute('class', 'smallSheep_isCatched')
          this.curSheep.style.left = event.clientX - this.exLeft + 'px'
          this.curSheep.style.top = event.clientY - this.exTop + 'px'
        }
      },
      returnSheep(){
        if(this.curSheep !== null){
          this.curSheep.setAttribute('class', 'box')
          this.curSheep.firstChild.setAttribute('class', 'smallSheep')
          this.curSheep.style.top = 800 + 'px'
          this.curSheep = null
        }
      },
      showTB(){
        this.show = true;
      },
      closeTB(){
        this.show = false;
      }
    }
  }
</script>

<style scoped>
  #sheep{
    height:1000px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    border-top:1px solid #ccc;
  } 
  .box{
    width:154px;
    height:117px; 
    position:absolute;
    top:800px;  
  }
  .box_isCatched{
    width:154px;
    height:117px; 
    position:absolute;
    top:800px;   
  }
  .box:nth-child(even){
    animation:run2 15s linear infinite;
  }
  .box:nth-child(odd){
    animation:run2 10s linear infinite;
  }
  .smallSheep{
    width:154px;
    height:117px;
    background:url('../../assets/img/sheep.png') no-repeat;
    background-position:0px 0px;
    animation:run1 .2s steps(1) infinite;
  }
  .smallSheep_isCatched{
    width:154px;
    height:117px;
    background:url('../../assets/img/sheep.png') no-repeat;
    background-position:0px -117px;    
  }
  @keyframes run1{
    0%{
      background-position:0px 0px;
    }
    12.5%{
      background-position:-164px 0px;
    }
    25%{
      background-position:-328px 0px;
    }
    37.5%{
      background-position:-492px 0px;
    }
    50%{
      background-position:-656px 0px;
    }
    62.5%{
      background-position:-820px 0px;
    }
    75%{
      background-position:-984px 0px;
    }
    87.5%{
      background-position:-1148px 0px;
    }
    100%{
      background-position:0px 0px;
    }
  }
  @keyframes run2{
    from{

    }
    to{
      left:-154px;
    }
  }
  /* 告示提示信息 */
  .msg{
    height:200px;
    width:200px;
    border: 1px solid #ADCD3C;
    position:relative;
    left:0;
    top:0;
  }
  .msg_box{
    height:150px;
    width:150px;
    border:1px solid #ccc;
    margin:20px;
    position: absolute;
  }
  .msg_box h1{
    display: inline-block;
    position: relative;
    left:50%;
    top:20px;
    transform: translateX(-50%);
  }
  .msg_box span{
    background-color: #fff;
    font-weight: bold;
    font-size:18px;
    padding:5px 10px;
    display: inline-block;
    position: relative;
    left:50%;
    bottom:-60px;
    border: 1px solid #ADCD3C;
    transform: translateX(-50%);
  }
  /*简介的样式*/
  .transition-box {
    width: 600px;
    height:450px;
    border-radius: 4px;
    /* box-shadow:15px 15px 20px #aaa; */
    border:1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
    padding:20px 0;
    margin:-75px auto;
    position:relative;
    /* top:65px;
    left:50%;
    transform: translateX(-50%); */
  }
  .transition-box img{
    height:150px;
    margin:60 auto;
    padding:20px 8px;
  }
  .transition-box .close{
    font-size:24px;
    position: absolute;
    top:15px;
    right:15px;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid #ccc;
    border-radius: 50%;
  }
  .introduce{
    padding: 0 30px;
  }
  h5{
    text-align:left;
    font-size:16px;
    margin-left:8px;
  }
  p{
    text-align:left;
    margin-left:8px;
    margin-right:12px;
    text-indent:2em;
  }
</style>